<template>
    <div class="product-service">
        <div class=" content content-info">
         <img :src="hill4Img" alt="" class="hill4Img">
            <p class="service-title">产品服务</p>
            <ul class="title-li">
                 <li v-for="(item,i) in service" :key="i" @click="serviceDetail(item,i)"
                  :class="i == activeId ? 'selected' : ''"
                  style="cursor: pointer;">
                    {{item.title}}
                 </li>
            </ul>
            <div class="card">
                <div class="info-left">
                  <p class="name">{{data.name}}</p>
                  <p class="info-content">
                    {{data.content}}
                  </p>
                </div>
                <div class="info-right">
                  <ul>
                    <li>
                      <img :src="data.path" alt="">
                        <p>
                          <span>{{data.detail}}</span>
                          <span>{{data.price}}</span>
                        </p>
                    </li>
                    <li>
                      <img :src="data.path1" alt="">
                        <p>
                          <span>{{data.detail}}</span>
                          <span>{{data.price}}</span>
                        </p>
                    </li>
                    <!-- <li>
                      <img :src="data.path2" alt="">
                        <p>
                          <span>{{data.detail}}</span>
                          <span>{{data.price}}</span>
                        </p>
                    </li> -->
                  </ul>
                </div>
            </div>
 
        </div>
        <div class="service-rotation">
          <ul>
            <li>
          “ 虔 诚 虽 无 人 见 , 存 心 自 有 天 知 。”   “ 吃 药 要 找 张 恒 春 ， 看 病 要 找 腾 坨 子 ”
            </li>
          </ul>
        </div>
    </div>
</template>

<script>
import '@/assets/less/HomePage.less'
import '@/assets/less/ProductService.less'
export default {
    name: 'ProductService',
  props:['busData'],
    data() {
        return {
          activeId:0,
          data:
          {  
          name:'',
          path:'',
          path1:'',
          path2:'',
          detail:'',
          price:'',
          },
            service:[
                {title:'精品膏药',
                name:'精品药膏',
                content:'张恒春精品药膏种类众多，其中包括张恒春延寿膏、张恒春长寿膏、张恒春祛斑葆春膏、张恒春参鹿补膏、张恒春益气活血膏、张恒春和畅膏、张恒春益肾健骨膏、张恒春滋补肝肾膏、张恒春健脾和胃膏、张恒春川贝润肺膏。',
                path:require('@/assets/imsges/service6.jpg'),
                path1:require('@/assets/imsges/service7.jpg'),
                path2:require('@/assets/imsges/service8.jpg'),
                detail:'人参',
                price:'价格'
                },
                {title:'精品饮片',
                name:'精品饮片',
                content:'张恒春饮片种类众多，其中包括人参、燕窝、雪蛤、海参、冬虫夏草、鹿茸、西洋参、铁石石斜、构杞子、三七、川贝母、何首乌、黄芪、当归、天麻。金银花。',
                path:require('@/assets/imsges/service3.jpg'),
                path1:require('@/assets/imsges/service4.jpg'),
                path2:require('@/assets/imsges/service5.jpg'),
                detail:'人参',
                price:'价格'
                },{title:'精品中成药',
                name:'精品中成药',
                content:'张恒春精品中成药种类众多，其中包括六味地黄丸、明目地黄丸、逍遥丸、香砂养胃丸、杞菊地黄丸、补中益气丸、知柏地黄丸、保和丸、桂附地黄丸、藿香正气丸、附子理中丸、香砂六君丸、安神补心丸、柏子养心丸、归脾丸、天王补心丸、十全大补丸、肺结核丸、黄连上清片、牛黄解毒片、复方丹参片、妇科十味片、三七片、三七伤药片、黄杨宁片、利胆片、小柴胡颗粒、枇杷止咳颗粒、板蓝根颗粒（大袋）、小儿氨酚黄那敏颗粒、恒制咳喘胶囊、十七味填精胶囊、断血流胶囊、补肾强身胶囊、降糖宁胶囊、氨咖黄敏胶囊等。',
                path:require('@/assets/imsges/service9.jpg'),
                path1:require('@/assets/imsges/service10.jpg'),
                path2:require('@/assets/imsges/service11.jpg'),
                detail:'人参',
                price:'价格'
                },{title:'健康产品',
                name:'健康产品',
                content:'张恒春健康产品种类众多，其中包括鹿鞭血筋丸、香囊、气血双补口服液、常润茶、长生茶、安神酒、助阳酒。',
                path:require('@/assets/imsges/service12.jpg'),
                path1:require('@/assets/imsges/service13.jpg'),
                path2:require('@/assets/imsges/service14.png'),
                detail:'人参',
                price:'价格'
                },{title:'张恒春鸡药',
                name:'张恒春鸡药',
                content:'一、张恒春鸡药历史渊源1、鸡药是由创办芜湖张恒春药号的第一代掌门张文金，根据1500多年前陶弘景的宫廷秘方和《宋·太平惠民和剂局方》十全饮化裁而成。2、据记载，当年一些慕名来芜湖买鸡药的外地人曾到过张恒春药号，询问掌柜有关鸡药的用法？文金回答：“鸡药不分类，吃了反受累。”3、张恒春历史上第一位开鸡药处方的坐堂医生为名中医徐少鳌的曾祖父徐文田，他曾在药号大堂前张贴告示，——“欲使鸡药显神功，分类坐堂定乾坤”。自此，鸡药开处方必须经由坐堂医生决定，成为世代传承的规矩。4、清末民初，张恒春药号创造了一天出售鸡药达一万多枚银元的业绩。5、《张恒春老号处方集》记载，“梅天、秋季选未开声之仔公鸡，九天、初春选三载以上母鸡，宰杀之，去其内脏及头，身冷水浸泡半时辰。纱巾裹扎底方，自股塞入肚，针线缝实，整置陶罐，武火烧开，文火慢炖两时辰，切勿放盐，忌施佐料，……”',
                path:require('@/assets/imsges/service15.jpg'),
                path1:require('@/assets/imsges/service16.jpg'),
                path2:require('@/assets/imsges/service17.jpg'),
                detail:'人参',
                price:'价格'
                },
            ],
            hill4Img:require('@/assets/imsges/hill4.png')
        };
    },
    created(){
      this.serviceDetail(this.busData&&this.busData.code?this.service[this.busData.activeId]:this.service[0],this.busData&&this.busData.activeId?this.busData.activeId:0)
    },
    

    methods: {
       serviceDetail(data,i){
        this.activeId=i;
        this.data = data;
       }
    },
};
</script>

<style lang="scss" scoped>

</style>